<!DOCTYPE html>
<html>
<head>
<title>Double Circle</title>
<script src="../lib/zeu.js"></script>
<script src="examples.js"></script>
<link rel="stylesheet" href="example.css">
</head>
<body>
  <div class="container">
    <h3>Default Size</h3>
    <pre><code>
width: 200px; 
height: 200px;
    </code></pre>

    <h3>Default</h3>
    <pre><code>
var doubleCircle1 = new zeu.DoubleCircle(document.getElementById('double-circle-1'));
    </code></pre>
    <div id="double-circle-1" style="width: 200px; height: 200px;"></div>

    <h3>Options - Dots</h3>
    <pre><code>
var doubleCircle2 = new zeu.DoubleCircle(
  document.getElementById('double-circle-2'), {
    isDot: false,
    lineWidth: 10,
    outer: {
      color: 'red',
      radius: 90,
      speed: 0.5
    },
    inner: {
      color: 'blue',
      radius: 70,
      speed: 0.2
    },
    fontColor: 'green',
    text: 'MIDDLE',
  });
    </code></pre>
    <div id="double-circle-2" style="width: 200px; height: 200px;"></div>

    <h3>Options - Circle</h3>
    <pre><code>
var doubleCircle3 = new zeu.DoubleCircle(
  document.getElementById('double-circle-3'), {
    isDot: true,
    dots: 30,
    outer: {
      color: 'red',
      radius: 80,
      speed: 5
    },
    inner: {
      color: 'blue',
      radius: 70,
      speed: 3
    },
    fontColor: 'green',
    text: 'MIDDLE',
    font: 'italic bold 30px Arial'
  });
  doubleCircle3.fontColor = 'red';
  doubleCircle3.text = 'CHANGE!';
    </code></pre>
    <div id="double-circle-3" style="width: 200px; height: 200px;"></div>

    <h3>Size X 2</h3>
    <div id="double-circle-4" style="width: 400px; height: 400px;"></div>

  </div>
</div>

<script type="text/javascript">

  var doubleCircle1 = new zeu.DoubleCircle(document.getElementById('double-circle-1'));

  var doubleCircle2 = new zeu.DoubleCircle(
    document.getElementById('double-circle-2'), {
      isDot: false,
      lineWidth: 10,
      outer: {
        color: 'red',
        radius: 90,
        speed: 0.5
      },
      inner: {
        color: 'blue',
        radius: 70,
        speed: 0.2
      },
      fontColor: 'green',
      text: 'MIDDLE',
    });

  var doubleCircle3 = new zeu.DoubleCircle(
    document.getElementById('double-circle-3'), {
      isDot: true,
      dots: 30,
      outer: {
        color: 'red',
        radius: 80,
        speed: 5
      },
      inner: {
        color: 'blue',
        radius: 70,
        speed: 3
      },
      fontColor: 'green',
      text: 'MIDDLE',
      font: 'italic bold 30px Arial'
    });
  doubleCircle3.fontColor = 'red';
  doubleCircle3.text = 'CHANGE!';

  var doubleCircle4 = new zeu.DoubleCircle(document.getElementById('double-circle-4'));

</script>
</body>
</html>
